<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>京东手机</title>
    <style>
        .item {
            float: left;
            border: 1px solid gainsboro;
            margin: 10px;
            padding: 5px;
            width: 200px;
            height: 300px;
        }

        a {
            color: #666;
            text-decoration: none;
        }

    </style>
    <script src="js/vue.js"></script>
    <script src="js/axios-0.18.0.js"></script>
</head>
<body>
<!---->
<div>
    <img src="img/head.jpg" height="30" width="100%"/>
</div>

<!---->
<div style="height: 500px" id="div3">
    <!--搜索框-->
    <div style="text-align: center; height:80px; background: url(img/logo.jpg) no-repeat">

        <input type="text" v-model="queryString"
               style="border: 3px solid red;outline:none; height: 25px; width: 600px; margin-top: 25px;"
               placeholder=" 请输入搜索信息 ">

        <input type="button" @click="search"
               style="border: 3px solid red;outline:none; height: 33px; width: 100px; margin-top: 25px; background-color: red; color: white; font-weight: bold"
               value=" 搜 索 ">

        <div style="color: #999; font-size: 10px"> 华为手机 | 手机自营 | 华为 | 苹果手机 | 小米 | 手机5g | 小米手机 | 小米10 | 荣耀 | 苹果 12</div>

    </div>

    <hr>

    <!--商品列表展示-->
    <div style="width: 80%; padding-left: 200px">

        <div class="item" v-for="p in productList">
            <div><img :src="p.img" style="width: 190px"></div>
            <div style="color: red; text-align: center">￥{{p.price}}</div>
            <a :href="p.href" target="_blank">
                <div v-html="p.title" style="font-size: 10px; height: 50px; overflow:hidden" :title="p.title"></div>
            </a>
            <div style="font-size: 10px; color: #646fb0; font-weight: bold; ">{{p.commit}}条评价</div>
            <div style="font-size: 10px; color: #999; font-weight: bold; ">{{p.shop}}<img src="img/kf.png"></div>
        </div>

    </div>

</div>

<!---->
<div style="clear: both">
    <hr>
    <img src="img/foot.jpg" height="500" width="100%"/>
</div>

<script>

    new Vue({
        el: "#div3",
        data: {
            queryString: "手机",
            productList: []
        },
        methods: {
            search: function () {
                axios.get("/product/search?queryString=" + this.queryString).then(res => {
                    this.productList = res.data;
                });
            }
        },
        mounted: function () {
            this.search();
        }
    });
</script>

</body>
</html>